<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PlayEdu - 智能学习平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
    <style>
        :root {
            --primary: #409EFF !important;
            --primary-light: #5aadff !important;
            --secondary: #4e54c8 !important;
            --accent: #6c5ce7 !important;
            --light: #f8f9fa;
            --dark: #343a40;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #eef2f6 100%);
            color: #333;
            overflow-x: hidden;
        }

        .site-info {
            margin-top: -6rem;
            padding: 8rem 0 !important;
            margin-bottom: 3rem;
            background: linear-gradient(120deg, var(--primary), var(--secondary));
            color: white;
            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
            position: relative;
            overflow: hidden;
        }

        .site-info::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
        }

        .site-title {
            font-weight: 800;
            font-size: 3.5rem;
            margin-bottom: 1rem;
            position: relative;
            z-index: 2;
        }

        .site-subtitle {
            font-size: 1.3rem;
            font-weight: 300;
            position: relative;
            z-index: 2;
            max-width: 600px;
            margin: 0 auto;
        }

        .features {
            margin-top: 2rem;
            margin-bottom: 4rem;
        }

        .feature {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(64, 158, 255, 0.12);
            margin-bottom: 3rem;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            border: 1px solid rgba(64, 158, 255, 0.15);
        }

        .feature:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 40px rgba(64, 158, 255, 0.2);
        }

        .feature-container {
            padding: 3rem 2rem;
        }

        .feature-title {
            font-weight: 700;
            font-size: 2rem;
            color: var(--dark);
            position: relative;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .feature-title::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 60px;
            height: 4px;
            background: var(--primary);
            border-radius: 2px;
        }

        .feature-desc {
            font-size: 1.1rem;
            line-height: 1.7;
            color: #555;
            margin-bottom: 1.5rem;
        }

        .feature-image {
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .feature-image:hover {
            transform: scale(1.02);
        }

        .ai-pill {
            background: linear-gradient(to right, var(--accent), var(--primary));
            color: white;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            margin-left: 0.8rem;
            vertical-align: super;
        }

        .ai-pill i {
            margin-right: 0.3rem;
            font-size: 0.8rem;
        }

        .ai-features {
            background: rgba(64, 158, 255, 0.05);
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 1.5rem;
            border-left: 3px solid var(--primary);
        }

        .ai-feature-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 0.8rem;
        }

        .ai-feature-item:last-child {
            margin-bottom: 0;
        }

        .ai-feature-icon {
            background: var(--primary);
            color: white;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-right: 12px;
        }

        .ai-feature-text {
            flex: 1;
            font-size: 0.95rem;
            line-height: 1.5;
        }

        .ai-feature-title {
            font-weight: 600;
            color: var(--dark);
            margin-bottom: 0.2rem;
        }

        .ai-feature-desc {
            font-size: 0.85rem;
            color: #666;
        }

        .tag {
            display: inline-block;
            background: rgba(64, 158, 255, 0.15);
            color: var(--primary);
            font-size: 0.75rem;
            padding: 0.2rem 0.6rem;
            border-radius: 4px;
            margin-right: 0.5rem;
            margin-top: 0.3rem;
        }

        .feature-cta {
            background: var(--primary);
            color: white;
            border: none;
            padding: 0.5rem 1.5rem;
            border-radius: 30px;
            font-weight: 600;
            transition: all 0.3s ease;
            margin-top: 1rem;
            display: inline-block;
        }

        .feature-cta:hover {
            background: var(--primary-light);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(64, 158, 255, 0.3);
        }

        @media (max-width: 992px) {
            .feature-container {
                padding: 2rem 1.5rem;
            }

            .site-title {
                font-size: 2.5rem;
            }
        }
        .nav-link {
            color: #fff !important;
        }
    </style>
</head>
<body>
<!-- 保留Thymeleaf结构注释（实际使用时恢复） -->
 <div th:replace="~{ app :: layout ('首页', ~{::#css}, ~{::#site_info}, ~{::#main}, ~{::#js}) }" xmlns:th="http://www.thymeleaf.org">

<div id="css">
    <link href="vendor/aos/dist/aos.css" rel="stylesheet">
</div>

<div class="site-info text-center" id="site_info">
    <h1 class="site-title animate__animated animate__fadeInDown">学以致用</h1>
    <div id="typed-strings">
        <p class="site-subtitle">AI赋能学习，从想法到实现的智能之路。</p>
    </div>
    <span class="site-subtitle lead" id="typed"></span>
</div>

<div class="features" id="main">
    <!-- 文档模块 - 突出AI功能 -->
    <div class="feature">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-5">
                    <div class="feature-container" data-aos="fade-right">
                        <h3 class="feature-title">文档<span class="ai-pill"><i class="fas fa-robot"></i> AI增强</span></h3>
                        <p class="feature-desc">智能文档平台集成了强大的AI处理能力，让学习文档更加高效。</p>

                        <div class="ai-features">
                            <div class="ai-feature-item">
                                <div class="ai-feature-icon">
                                    <i class="fas fa-globe"></i>
                                </div>
                                <div class="ai-feature-text">
                                    <div class="ai-feature-title">多语言实时翻译</div>
                                    <div class="ai-feature-desc">支持中、英、日、韩等多语言一键互译</div>
                                </div>
                            </div>

                            <div class="ai-feature-item">
                                <div class="ai-feature-icon">
                                    <i class="fas fa-volume-up"></i>
                                </div>
                                <div class="ai-feature-text">
                                    <div class="ai-feature-title">AI自动朗读</div>
                                    <div class="ai-feature-desc">自然语音播放，支持语速调节与情感表达</div>
                                </div>
                            </div>

                            <div class="ai-feature-item">
                                <div class="ai-feature-icon">
                                    <i class="fas fa-file-alt"></i>
                                </div>
                                <div class="ai-feature-text">
                                    <div class="ai-feature-title">智能摘要与封面</div>
                                    <div class="ai-feature-desc">自动生成文档概述与匹配主题的精美封面</div>
                                </div>
                            </div>
                        </div>

                        <span class="tag">Markdown支持</span>
                        <span class="tag">分类管理</span>
                        <span class="tag">内容分析</span>

                        <a href="/docs" th:href="@{/docs}" class="feature-cta">体验AI文档</a>
                    </div>
                </div>

                <div class="col-lg-7">
                    <div class="text-center p-4" data-aos="zoom-in">
                        <img class="img-fluid feature-image" src="https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&auto=format&fit=crop&w=900&h=600&q=80" alt="AI文档处理">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 视频模块 - 突出AI功能 -->
    <div class="feature">
        <div class="container">
            <div class="row flex-row-reverse align-items-center">
                <div class="col-lg-5">
                    <div class="feature-container" data-aos="fade-left">
                        <h3 class="feature-title">视频<span class="ai-pill"><i class="fas fa-robot"></i> AI增强</span></h3>
                        <p class="feature-desc">智能视频处理平台让视频内容更易理解、更易传播。</p>

                        <div class="ai-features">
                            <div class="ai-feature-item">
                                <div class="ai-feature-icon">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                                <div class="ai-feature-text">
                                    <div class="ai-feature-title">内容智能提取</div>
                                    <div class="ai-feature-desc">自动分析视频内容，生成知识要点总结</div>
                                </div>
                            </div>

                            <div class="ai-feature-item">
                                <div class="ai-feature-icon">
                                    <i class="fas fa-closed-captioning"></i>
                                </div>
                                <div class="ai-feature-text">
                                    <div class="ai-feature-title">多语言字幕生成</div>
                                    <div class="ai-feature-desc">实时生成中、英、日等多语言字幕</div>
                                </div>
                            </div>

                            <div class="ai-feature-item">
                                <div class="ai-feature-icon">
                                    <i class="fas fa-file-powerpoint"></i>
                                </div>
                                <div class="ai-feature-text">
                                    <div class="ai-feature-title">智能PPT转换</div>
                                    <div class="ai-feature-desc">自动提取关键帧和摘要，生成结构化PPT</div>
                                </div>
                            </div>
                        </div>

                        <span class="tag">高清播放</span>
                        <span class="tag">分类管理</span>
                        <span class="tag">内容分析</span>

                        <a href="/videos" th:href="@{/videos}" class="feature-cta">体验AI视频</a>
                    </div>
                </div>

                <div class="col-lg-7">
                    <div class="text-center p-4" data-aos="zoom-in">
                        <img class="img-fluid feature-image" src="https://images.unsplash.com/photo-1558008258-3256797b43f3?ixlib=rb-4.0.3&auto=format&fit=crop&w=900&h=600&q=80" alt="AI视频处理">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="js">
    <script src="js/typed.min.js"></script>
    <script src="vendor/aos/dist/aos.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 创建Typed.js实例
            const options = {
                stringsElement: '#typed-strings',
                typeSpeed: 60,
                startDelay: 300,
                showCursor: true,
                cursorChar: '|',
                loop: false
            };

            new Typed("#typed", options);

            // 初始化AOS动画库
            AOS.init({
                duration: 800,
                delay: 100,
                once: true,
            });

            // 添加交互效果
            document.querySelectorAll('.feature').forEach(feature => {
                feature.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.02)';
                });

                feature.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1)';
                });
            });
        });
    </script>
</div>

<!-- 实际使用时恢复Thymeleaf闭合标签 -->
 </div>
</body>
</html>